\n
If you decide to not use redux in your small-scaled project, and figured that context might be enough for your state management needs, you might as well check out the useReducer hook. It brings the action-reducer pattern from redux to context which helps us separate rendering and state management. This separation results in components that are easier to maintain.
Before talking about the concept of useReducer hook, let’s recap how the reduce method in javascript works.The reduce() method receives a callback and the initial value as arguments and reduces all the elements in an array into a single output value which can be of any type (number, string, object, etc.).
A simple example of reduce method would be:
\nconst result = baseArray.reduce((accumulator, currentValue) => {\n // functions body\n return resultValue;\n}, initialValue);Now that we know what reduce method does, let’s talk about when should we use useReducer hook in our project.
The first use case is when we have complex state structure, like nested arrays or objects. In this case, you can provide all the logic inside a single reducer which separates state management from rendering logic and makes it easier to manage.
\nAnother use case is when you need to operate multiple state transitions on one state object. The useReducer hook can give you more predictable state transitions which helps you when complex state transitions are all happening at once.
\nThe useReducer hook accepts a reducer function and an initial state as arguments, and returns the current state and a dispatch function:
const [state, dispatch] = useReducer(reducer, initialState);The reducer is a pure function that accepts 2 parameters: the current state and an action object. Depending on the action object, the reducer function must update the state in an immutable manner, and return the new state.
\nfunction reducer(state, action) {\n let newState;\n switch (action.type) {\n case '...':\n ...\n break;\n }\n return newState;\n}The initial state is the value the state is initialized with.
\nThe dispatch function should be called every time we need to update the state. It takes an action object as an argument.
\nAn action object is an object that describes how to update the state. If the action needs to have payload (information) then additional properties can be added to the action object.
\nconst action = {\n type: 'remove',\n data: {\n key: 'value',\n }\n};In order to understand how useReducer works, let’s build a simple to-do app using it.
First we need to declare out initial state:
\nimport { useReducer, useState } from \"react\";\nimport \"./styles.css\";\n\nconst initialState = [\n {\n name: \"Workout\"\n },\n {\n name: \"Study\"\n },\n {\n name: \"Sleep\"\n }\n];\n\n\nconst App = () => {\n\n return (\n <div className=\"todo-container\">\n \n </div>\n );\n};\n\nexport default App;Then we create a todoItem component for our todo-list items, which displays the name and a remove button for deleting that particular item:
const TodoItem = ({ item }) => {\n const removeTodo = () => {\n\n };\n\n return (\n <div className=\"todo-item\">\n <div className=\"name\">{item.name}</div>\n <div className=\"delete\" onClick={() => removeTodo()}>\n - remove\n </div>\n </div>\n );\n};Next, we need to add todo-items . So let’s add an input for todo name alongside a button for submitting the item:
\nimport { useReducer, useState } from \"react\";\nimport \"./styles.css\";\n\nconst initialState = [...]\n\nconst App = () => {\n const [addInput, setAddInput] = useState(\"\");\n\n const addTodo = () => {\n\n }\n\n return (\n <div className=\"todo-container\">\n <div className=\"add-todo\">\n <input\n placeholder=\"What are you going to do?\"\n value={addInput}\n onChange={(e) => setAddInput(e.target.value)}\n />\n <button onClick={() => addTodo()}>+ Add</button>\n </div>\n </div>\n );\n};\n\nconst TodoItem = ({ item }) => {...}\n\nexport default App;Now we need to implement the functionality of adding and removing to the list.\nFirst let’s declare our useReducer with the initial state and write a reducer function with two actions, add and remove. This returns a state which we should map through in render and a dispatch method for dispatching the actions we need:
import { useReducer, useState } from \"react\";\nimport \"./styles.css\";\n\nconst initialState = [...]\n\nconst reducer = (state, action) => { let newState; switch (action.type) { case \"add\": newState = [...state, action.payload]; break; case \"remove\": newState = [...state.filter((item) => item.name !== action.payload.name)]; break; default: throw new Error(); } return newState;};\nconst App = () => {\n const [addInput, setAddInput] = useState(\"\");\n \n const [state, dispatch] = useReducer(reducer, initialState);\n const addTodo = () => {\n\n }\n\n return (\n <div className=\"todo-container\">\n <div className=\"add-todo\">\n <input\n placeholder=\"What are you going to do?\"\n value={addInput}\n onChange={(e) => setAddInput(e.target.value)}\n />\n <button onClick={() => addTodo()}>+ Add</button>\n </div>\n \n <div className=\"todo-items\"> {state.map((item, index) => ( <TodoItem key={index} item={item} dispatch={dispatch} /> ))} </div> </div>\n );\n};\n\nconst TodoItem = ({ item }) => {...}\n\nexport default App;In the end we need to use dispatch our actions in addTodo() and removeTodo() methods in order to change the state:
const addTodo = () => {\n if (!Boolean(addInput)) {\n alert(\"Name cannot be empty...!\");\n return;\n }\n dispatch({\n type: \"add\",\n payload: {\n name: addInput\n }\n });\n setAddInput(\"\");\n };\n \n const removeTodo = () => {\n dispatch({\n type: \"remove\",\n payload: item\n });\n };See the example in codesandbox
\n\n
One of the feature related to properties and methods which exists in javascript es6 or later is static properties and methods.
\nIt allows us to add properties and methods to classes that are not accessed on an instance of a class, meaning that you don’t need to call new ClassName first, you can just access them directly on the class. It is often utility functions or global constants which you want to store in a class.
An example built into javascript is the math constructor function or class that’s globally available, where you can access PI as a constant value to get the number of PI, or functions or methods like POW to calculate the power of a number. These are methods and properties which you don’t access on the instance of math (there is no need to call new Math first, but you can access the properties and methods directly on the class itself. so in this example, math acts more like a namespace which is a common use case for static methods and properties and we can add them to our classes as well.
For example, let’s define a Rectangle class with width and height properties:
class Rectangle {\n constructor(height, width) {\n this.height = height;\n this.width = width;\n }\n}Now we want a method that helps us calculate the area of the rectangle:
\nclass Rectangle {\n constructor(height, width) {\n this.height = height;\n this.width = width;\n }\n\tgetArea() {\n\t\treturn `Area is: ${this.width*this.height}`;\n\t}\n}Let’s say we want a new rectangle:
\nconst rectangle1 = new Rectangle(50, 20);\nconsole.log(rectangle1.getArea());Here the console output: Area is: 1000
Now we want to be able to access getArea without instantiating Rectangle ,because we don’t really want to instantiate Rectangle just to call a utility method.
So we can add the static keyword in front of getArea method and pass width and height as properties to the method instead of using this :
class Rectangle {\n constructor(height, width) {\n this.height = height;\n this.width = width;\n }\n\tstatic getArea(width, height) {\n\t\treturn `Area is: ${width*height}`;\n\t}\n}Now we can just call the getArea method directly on the Rectangle class without the new keyword and therefore we used the class as a namespace:
const rectangle1 = Rectangle.getArea(50, 20);\nconsole.log(rectangle1);The output would be: Area is: 1000
If you’d want to add a static property to your class, just use the static keyword in front of your property.
For example, to add a unit of measurement to our Rectangle class, we can define a unit property:
class Rectangle {\n constructor(height, width) {\n this.height = height;\n this.width = width;\n }\n\tstatic getArea(width, height) {\n\t\treturn `Area is: ${width*height}`;\n\t}\n\tstatic unit = 'centimeter'\n}Now if we log the unit:
\nconsole.log(Rectangle.unit);The output would be: centimeter
One thing we should keep in mind is when we add them to a class, we can’t access them from the none-static parts of the class. So if we tried to access unit inside constructor, it won’t work:
class Rectangle {\n constructor(height, width) {\n this.height = height;\n this.width = width;\n\t\tconsole.log(this.unit);\n }\n\tstatic getArea(width, height) {\n\t\treturn `Area is: ${width*height}`;\n\t}\n\tstatic unit = 'centimeter'\n}We’ll get the following error:
\nProperty 'unit' is a static member of type 'Rectangle'
So we can’t access it because the constructor and all the other methods that are not marked with static will not be able to access static properties, because this refers to the instance created based on the class and the static property is not available on an instance since the idea behind static properties and static methods is the fact that they are detached from instances.
If you want to use static property or methods from inside the class, you’d have to use the class name:\nIn the end we need to use dispatch our actions in addTodo() and removeTodo() methods in order to change the state:
class Rectangle {\n constructor(height, width) {\n this.height = height;\n this.width = width;\n\t\tconsole.log(Rectangle.unit);\n }\n\tstatic getArea(width, height) {\n\t\treturn `Area is: ${width*height}`;\n\t}\n\tstatic unit = 'centimeter'\n}\n
In this post we're going to understand basic concepts of React Context and after that we learn how to implement context in an application in both functional components and class components. Then we cover some best practices on how to handle context in applications.
\nBefore we implement context in our application we should understand the concept and possible use cases it has. According to official react docs:
\n\n\nContext provides a way to pass data through the component tree without having to pass props down manually at every level.
\n
There are some types of props that several components at different levels of project tree need access to. In this case, if we provide the props manually through the application we find ourselves with several components with props that are just getting passed to lower levels of project tree without any actual usage inside that component (which is known as Prop Drilling). This can pollute our component props and cause pain and confusion in the debugging phase.
\n\nContext is designed to share data that can be considered “global”
\n
We can consider context as a global store where data lives, and all the data in this store (and any changes that will be made in the future) will be broadcasted to any component that needs it. For example, some use cases the Context API is ideal for: theming, user language, authentication, etc.
\nContext comes with two components: Provider and Consumer. Provider is used every time we need to create a context object, after that we can access values from it with the consumer component.
The process of creating a provider is the same with functional and class components, the only difference is in implementing consumers.
\nFor better understanding, We are going to use context to implement a dark-mode feature in a project. First we have to initialize our context object. Then we have to create our provider which has a dark-mode state and a toggle method inside it. We can have access to state and toggler method through provider.
\nimport { useState } from \"react\";\n\n// Class component context\n\nexport const ClassContext = React.createContext();\n\nexport const ClassProvider = ({ children }) => {\n const [darkMode, setDarkMode] = useState(false);\n\n const toggleDarkMode = () => {\n setDarkMode(!darkMode);\n };\n\n return (\n <ClassContext.Provider value={{ darkMode, toggleDarkMode }}>\n {children}\n </ClassContext.Provider>\n );\n};Then we have to wrap the part of our app that needs access to context with the provider. In this scenario, we have a class component that has a <Content /> and a button inside it, and clicking the button will trigger the toggler method which changes the content of our <Content />
import { ClassProvider } from \"./contexts/theme-context\";\nimport ClassComponent from \"./componenst/class-component\";\n\nconst App = () => {\n return (\n <div className=\"app-container\">\n <ClassProvider> <ClassComponent /> </ClassProvider> </div>\n );\n};\n\nexport default App;Here in the <ClassComponent /> we have to use the consumer variable inside classContext. Keep in mind that the child of a context consumer should always be a function that receives the variables and methods we need from context.
import { Component } from \"react\";\nimport Content from \"./content\";\nimport { ClassContext } from \"../contexts/theme-context\";\nclass classComponent extends Component {\n render() {\n return (\n <ClassContext.Consumer> \n {({ darkMode, toggleDarkMode }) => { return (\n <div className=\"class-component\">\n <Content darkMode={darkMode} />\n <button\n className={`toggle ${darkMode && \"dark-mode\"}`}\n onClick={() => toggleDarkMode()}\n >\n Switch to {darkMode ? \"Day\" : \"Night\"}\n </button>\n </div>\n );\n }}\n </ClassContext.Consumer> \n );\n }\n}\n\nexport default classComponent;And finally in <Content /> we have a bunch of if statements that changes the render every time we change the value in context:
import \"../styles.scss\";\nimport { Moon } from \"../assets/moon\";\nimport { Sun } from \"../assets/sun\";\n\nconst Content = ({ darkMode }) => {\n return (\n <div className={`content-container ${darkMode && \"dark-mode\"}`}> <div className=\"status-card\">\n {darkMode ? <Moon /> : <Sun />} <div className=\"card-title\">\n {darkMode ? \"Good Night!\" : \"Good Morning!\"} </div>\n </div>\n </div>\n );\n};\n\nexport default Content;Congrats, you have successfully implemented context in your app.
\nNow what if you need to divide your application into two sections and use different providers for each section?
\nFor learning purposes, imagine we need to implement the same dark-mode application, but this time we use functional components and hooks.
\nLet’s start with a second provider, but with the same variables and properties:
\n// Functional component context\n\nexport const FunctionalContext = React.createContext();\n\nexport const FunctionalProvider = ({ children }) => {\n const [darkMode, setDarkMode] = useState(false);\n\n const toggleDarkMode = () => {\n setDarkMode(!darkMode);\n };\n\n return (\n <FunctionalContext.Provider value={{ darkMode, toggleDarkMode }}>\n {children}\n </FunctionalContext.Provider>\n );\n};Now let’s wrap the new section of our app (we’ll call it FunctionalComponent) with the provider we just created in `
import \"./styles.scss\";\nimport { ClassProvider, FunctionalProvider } from \"./contexts/theme-context\";import ClassComponent from \"./componenst/class-component\";\nimport FunctionalComponent from \"./componenst/functional-component\";\nconst App = () => {\n return (\n <div className=\"app-container\">\n <ClassProvider>\n <ClassComponent />\n </ClassProvider>\n\n <FunctionalProvider> <FunctionalComponent /> </FunctionalProvider>\n </div>\n );\n};\n\nexport default App;In the <FunctionalComponent /> we don’t need to use consumer variable from context, instead we can use a react hook called useContext and pass the actual context to it to access any variable or method we need from it:
import { useContext } from \"react\";\nimport { FunctionalContext } from \"../contexts/theme-context\";import Content from \"./content\";\n\nexport default function FunctionalComponent() {\n const { darkMode, toggleDarkMode } = useContext(FunctionalContext);\n return (\n <div className=\"functional-component\">\n <Content darkMode={darkMode} />\n <button\n className={`toggle ${darkMode && \"dark-mode\"}`}\n onClick={() => toggleDarkMode()}\n >\n Switch to {darkMode ? \"Day\" : \"Night\"}\n </button>\n </div>\n );\n}Context is definitely a great approach if you need to avoid prop-drilling and want to write cleaner codes. But, if you’re thinking about replacing a complex state-management system like Redux with context, you might want to think twice and consider the limitations it offers. It may not be a suitable alternative to redux in complex state management or large scale projects, but if you’re working on a small project with few global states and want to avoid Redux boilerplates, context might be a good choice.
\nSee the example in codesandbox
\n\n
In this post we’re going to learn about what useMemo hook is and when should we use it in our application. Then we learn how to implement it and make sure it improves our app’s performance instead of making it worse.
In react, everything is based on state changes. Every state change inside a react component makes it re-render itself, which means invoking every variable or function declaration inside the component. Now imagine a performance heavy function that gets computed in every render and each time returns the same value. Until one of the props in that function changes, it will return the same result on each render and cause performance reduction in your app. useMemo is a react hook that enables you to memoize a function. It means that your function runs on the component initialization and the returned value will be stored so when the component state changes and DOM gets re-rendered, it can use the stored value instead of computing the function.
The useMemo hook accepts a function and an array of dependency and returns a memoized value.
\n\nuseMemo will only recompute the memoized value when one of the dependencies has changed. This optimization helps to avoid expensive calculations on every render.
\n
For better understanding, imagine a user list component with more than ten thousand entries (although this should never happen in real world projects) which returns a table of all the entries (users) and provides a gender based filter. Every time we switch gender, the table would re-render.
\nimport \"./styles.scss\";\nimport UserList from \"./components/user-list\";\nexport default function App() {\n return (\n <div className=\"main-container\">\n <UserList /> </div>\n );\n}import React, { useState } from \"react\";\nimport { userData } from \"../json-data/data\";\n\nconst UserList = () => {\n \n const [gender, setGender] = useState(\"male\");\n\n const userDataFiltered = (\n <>\n {userData\n .filter((item) => item.gender === gender)\n .map((item) => (\n <tr>\n <td>{item.index + 1}</td>\n <td>{item.name}</td>\n <td>{item.gender}</td>\n <td>{item.company}</td>\n <td>{item.isActive ? \"yes\" : \"no\"}</td>\n </tr>\n ))}\n </>\n );\n\n return (\n <div className=\"list-container\">\n <div className=\"filter-container\">\n <div className=\"gender-toggle\">\n <span>Male</span>\n <input\n type=\"checkbox\"\n id=\"switch\"\n onChange={() => {\n setGender(gender == \"male\" ? \"female\" : \"male\");\n }}\n checked={gender == \"male\" ? true : false}\n />\n <label for=\"switch\">gender</label>\n <span>Female</span>\n </div>\n </div>\n <table class=\"rwd-table\">\n <tr>\n <th>index</th>\n <th>Name</th>\n <th>Gender</th>\n <th>Company</th>\n <th>Active</th>\n </tr>\n {userDataFiltered}\n </table>\n </div>\n );\n};\n\nexport default UserList;The userData provided to the component is an array of objects:
export const userData = [\n {\n \"_id\": \"6137b0fd82ad3eca732c7e4b\",\n \"index\": 0,\n \"guid\": \"730d565c-20d7-49e9-80f3-8b1e8e0f0eff\",\n \"isActive\": true,\n \"balance\": \"$1,889.25\",\n \"name\": \"Mendez Arnold\",\n \"gender\": \"male\",\n \"company\": \"HATOLOGY\"\n},\n...\n]Now we add another state to this component, for example the value of a controlled input called tableName:
import React, { useState } from \"react\";\nimport { userData } from \"../json-data/data\";\n\nconst UserList = () => {\n \n const [gender, setGender] = useState(\"male\"); const [tableName, setTableName] = useState(null);\n\n const userDataFiltered = (\n <>\n {userData\n .filter((item) => item.gender === gender)\n .map((item) => (\n <tr>\n <td>{item.index + 1}</td>\n <td>{item.name}</td>\n <td>{item.gender}</td>\n <td>{item.company}</td>\n <td>{item.isActive ? \"yes\" : \"no\"}</td>\n </tr>\n ))}\n </>\n );\n\n return (\n <div className=\"list-container\">\n <div className=\"filter-container\">\n <div className=\"table-name\"> <input value={tableName} onChange={(e) => setTableName(e.target.value)} placeholder=\"Type a name for this list...\" /> </div> <div className=\"gender-toggle\">\n <span>Male</span>\n <input\n type=\"checkbox\"\n id=\"switch\"\n onChange={() => {\n setGender(gender == \"male\" ? \"female\" : \"male\");\n }}\n checked={gender == \"male\" ? true : false}\n />\n <label for=\"switch\">gender</label>\n <span>Female</span>\n </div>\n </div>\n <table class=\"rwd-table\">\n <tr>\n <th>index</th>\n <th>Name</th>\n <th>Gender</th>\n <th>Company</th>\n <th>Active</th>\n </tr>\n {userDataFiltered}\n </table>\n </div>\n );\n};\n\nexport default UserList;Notice that when we change the value of tableName, it takes a few seconds for the input to update. This is because when the tableName state changes, react has to re-render the component, this means our table with more than ten thousand entries should get filtered based on gender and returned every time we press a key.
Now what if there was a way to change tableName without filtering and rendering the table? To achieve this functionality we need to memoize our table so only when we call setGender the process of filtering and rendering happens.
We have to do some changes in user-list.js:
import React, { useMemo, useState } from \"react\";import { userData } from \"../json-data/data\";\n\nconst UserList = () => {\n \n const [gender, setGender] = useState(\"male\");\n const [tableName, setTableName] = useState(null);\n\n const userDataFiltered = useMemo(() => { return ( <>\n {userData\n .filter((item) => item.gender === gender)\n .map((item) => (\n <tr>\n <td>{item.index + 1}</td>\n <td>{item.name}</td>\n <td>{item.gender}</td>\n <td>{item.company}</td>\n <td>{item.isActive ? \"yes\" : \"no\"}</td>\n </tr>\n ))}\n </>\n );\n }, [gender]);\n\n return (\n <div className=\"list-container\">\n <div className=\"filter-container\">\n <div className=\"table-name\">\n <input\n value={tableName}\n onChange={(e) => setTableName(e.target.value)}\n placeholder=\"Type a name for this list...\"\n />\n </div>\n <div className=\"gender-toggle\">\n <span>Male</span>\n <input\n type=\"checkbox\"\n id=\"switch\"\n onChange={() => {\n setGender(gender == \"male\" ? \"female\" : \"male\");\n }}\n checked={gender == \"male\" ? true : false}\n />\n <label for=\"switch\">gender</label>\n <span>Female</span>\n </div>\n </div>\n <table class=\"rwd-table\">\n <tr>\n <th>index</th>\n <th>Name</th>\n <th>Gender</th>\n <th>Company</th>\n <th>Active</th>\n </tr>\n {userDataFiltered}\n </table>\n </div>\n );\n};\n\nexport default UserList;You can see that without any effort, the userDataFiltered is memoized and won't be invoked until its dependency array items (gender) change. Now if we change the value of our input, a huge performance increase can be noticed as it updates instantly.
See the example in codesandbox
\n